<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="js/vue-2.6.12.js"></script>
	<script src="js/vue-router-3.4.9.js"></script>
</head>
<body>

<div id="app">
<!--	 通过地址传参 要求低 跟普通的http请求携带参数写法一致-->
	<router-link to="/query-param?name=小雅&age=23">通过地址传参</router-link>
	
<!--	通过对象传参 语法要求严格
1 to 前面必须加上 ":"
2 传递对象参数 有两个属性 path="/路径",query={name="name",age:23}  字符串必须使用单引号引起来

这两种 传参的方法只是写法不同 本质都是拼接地址参数
-->
	<router-link :to="{path:'/query-param',query:{name:'阿雪',age:23}}">通过对象传参</router-link>
<hr>
	<router-view></router-view>
</div>

<template id="query-param">
<!--	通过{{$route.query.属性名}}  获取传递的参数 -->
	<div>
		<span>姓名:{{$route.query.name}}</span>
		<span>年龄:{{$route.query.age}}</span>
	</div>
	
</template>

<script>
	
  let queryParam = {
    
    template:"#query-param",
    
    
  }
	
	
	
	let app = new Vue({
	
	  el:"#app",
	  router:new VueRouter({
	    
	    routes:[
	      {path:"/query-param",component:queryParam}
	    ]
	    
	  })
	  
	
	})
	
</script>

</body>
</html>